<template>
  <div>
    <!-- 头部logo部分 -->
    <div class="boxLogo">
      <div class="logoImg">
        <img :src="logoImg" />
        <div>
          <p class="logonew">新人送108元购物礼包</p>
          <p class="logotext">下载考拉APP获取</p>
        </div>
      </div>
      <div class="logoApp">下载APP</div>
    </div>

    <!-- 头部搜索框 -->

    <header :class="{'is_fixed' : isFixed}" id="boxFixed">
      <div class="headerInput">
        <van-icon name="search" color="red" size="0.9rem" />
      </div>
      <div class="headerlogin">登陆/注册</div>
    </header>

    <!-- 轮播图 -->
    <van-swipe @change="onChange">
      <van-swipe-item v-for="(item) in carousel" :key="item.id">
        <img :src="item.imgUrl" class="custom-carousel" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/8</div>
      </template>
    </van-swipe>
    <!-- 假一赔十 -->
    <div>
      <img :src="oimeiImg" class="oimeiImg" />
    </div>
    <!-- 分类小导航部分 -->
    <ul class="classifyNav">
      <li v-for="item in classifyNav" :key="item.id" class="classifyNav-item">
        <a href="###">
          <img :src="item.imgUrl" alt />
        </a>
      </li>
    </ul>
    <!-- 新人专属 -->
    <div class="newImg">
      <a href="###">
        <img :src="newImg" alt />
      </a>
    </div>
    <!-- 新人下方动图 -->
    <div class="gifimg">
      <div>
        <a href="###">
          <img :src="gifleft" class="gifleft" />
        </a>
      </div>
      <div>
        <a href="###">
          <img :src="gifRightTop" class="gifRightTop" />
        </a>
        <a href="###">
          <img :src="gifRightBottom" class="gifRightBottom" />
        </a>
      </div>
    </div>
    <!-- 回到顶部按钮 -->
    <div class="backTop" v-show="btnFlag">
      <van-icon name="upgrade" class="go-top" @click="backTop" />
    </div>
    <!-- 右侧考拉头像 -->
    <div class="koala" v-show="koala">
      <img :src="koalaImg" />
      <div class="koalaText">打开考拉</div>
    </div>
    <!-- 硬核补贴,排行榜图片 -->
    <div class="ranking">
      <div class="rankingLeft">
        <div class="rankingBox">
          <p>硬核补贴</p>
          <p class="rankingLeftP">大牌低价补贴</p>
          <div class="rankingImg">
            <img :src="rankingImg1" />
            <img :src="rankingImg2" />
          </div>
        </div>
      </div>
      <div class="rankingLeft">
        <div class="rankingBox">
          <p>排行榜</p>
          <p class="rankingLeftP">跟着买就对了</p>
          <div class="rankingImg">
            <img :src="rankingImg3" />
            <img :src="rankingImg4" />
          </div>
        </div>
      </div>
      <div class="rankingRight"></div>
    </div>
    <!-- 为你推荐 -->
    <img class="recommend" :src="recommend" />
    <!-- 列表 -->
    <div class="sortList">
      <div class="list-item" v-for="item in listdata" :key="item.title">
        <img :src="item.img" />
        <div class="listText">
          <div class="title">{{item.title}}</div>
          <div class="price">${{item.price}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logoImg: require("@/assets/images/home/20.webp"),
      // 轮播图
      current: 0,
      carousel: [
        {
          id: 1,
          imgUrl: require("@/assets/images/home/11.webp")
        },
        {
          id: 2,
          imgUrl: require("@/assets/images/home/12.webp")
        },
        {
          id: 3,
          imgUrl: require("@/assets/images/home/13.webp")
        },
        {
          id: 4,
          imgUrl: require("@/assets/images/home/14.webp")
        },
        {
          id: 5,
          imgUrl: require("@/assets/images/home/15.webp")
        },
        {
          id: 6,
          imgUrl: require("@/assets/images/home/16.webp")
        },
        {
          id: 7,
          imgUrl: require("@/assets/images/home/17.webp")
        },
        {
          id: 8,
          imgUrl: require("@/assets/images/home/18.webp")
        }
      ],
      // 假一赔十
      oimeiImg: require("@/assets/images/home/05.png"),
      // 分类小导航
      classifyNav: [
        {
          id: 1,
          imgUrl: require("@/assets/images/home/20.png")
        },
        {
          id: 2,
          imgUrl: require("@/assets/images/home/21.png")
        },
        {
          id: 3,
          imgUrl: require("@/assets/images/home/22.png")
        },
        {
          id: 4,
          imgUrl: require("@/assets/images/home/23.png")
        },
        {
          id: 5,
          imgUrl: require("@/assets/images/home/24.png")
        },
        {
          id: 6,
          imgUrl: require("@/assets/images/home/25.png")
        },
        {
          id: 7,
          imgUrl: require("@/assets/images/home/26.png")
        },
        {
          id: 8,
          imgUrl: require("@/assets/images/home/27.png")
        },
        {
          id: 9,
          imgUrl: require("@/assets/images/home/28.png")
        },
        {
          id: 10,
          imgUrl: require("@/assets/images/home/29.png")
        }
      ],
      // 新人图片
      newImg: require("@/assets/images/home/30.webp"),
      // 中间动图部分
      gifleft: require("@/assets/images/home/31.gif"),
      gifRightTop: require("@/assets/images/home/32.gif"),
      gifRightBottom: require("@/assets/images/home/33.gif"),
      // 回到顶部开关
      btnFlag: false,
      // 考拉头像
      koala: false,
      koalaImg: require("@/assets/images/home/01.webp"),
      rankingImg1: require("@/assets/images/home/40.webp"),
      rankingImg2: require("@/assets/images/home/41.webp"),
      rankingImg3: require("@/assets/images/home/42.webp"),
      rankingImg4: require("@/assets/images/home/43.webp"),
      // 为你推荐
      recommend: require("@/assets/images/home/30.png"),
      isFixed: false,
      // 列表
      listImg: require("@/assets/images/home/01.jpg"),
      listdata: [
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/28127acb3f1e49c5aeb8fa0afe8d00281571104396008k1r6zqhi10202.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "Kiehl's 科颜氏 高保湿水乳2件套 高保湿水250毫升+高保湿乳液125毫升",
          price: "329"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/ce419ecd-ae08-4984-94af-5f00acb82485.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【官方直采】帮宝适一级帮拉拉裤 XL64片/箱 加大码 裤型空气纸尿裤婴儿尿不",
          price: "216"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/7ed67864-4322-4ee1-b180-255bb4746901.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【品牌直采Aveeno艾惟诺婴儿天然燕麦保湿润肤乳 身体乳 227g淡蓝原装进口",
          price: "59"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/ef0b1e03d9eb43c4a64e6a613a17103415858188087221324AC5C0E2CD132260A86D4F93055BD.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【痘印术后必备】KELO-COTE 芭克软膏去疤修复膏 15克/支",
          price: "238"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/2c2862a0a98248cfb88686ae3b361f68_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "freeplus芙丽芳丝洗面奶 氨基酸洁面净润洗面霜深层清洁",
          price: "99"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/6dc7a3559d0041b1b54c013503c8710c_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "雅特茂泰国乳胶内衣女无痕无钢圈聚拢舒适睡眠蕾丝文胸罩防震收副乳",
          price: "59.9"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/f9675fdd84124949916f0d5f32213819_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【第2件0元，需拍2件】完美日记白胖子氨基酸卸妆水温和清洁卸妆500ml大容量",
          price: "59.9"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/5d39e20a78ac4efda0d9256cfa395f15_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【+9.9换购洗面奶】【含替换装】AGE20`s 爱纪二十之 爱敬 精华粉底气垫底妆BB霜 精华含量71% 14g+14g",
          price: "168"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/2cef44d96cb345d5975f35863c401761_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "AK碎花连衣裙中长款2020夏季新款花岛少女油画裙V领雪纺小雏菊法式A字裙",
          price: "169"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/1bi1ao12u43_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "b.box 宝宝第三代重力水杯 防呛防漏 240毫升 6个月以上",
          price: "79"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/36d39e0a-b373-4535-9ddc-84ebd0f7ee35?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "网易严选 男/女轻弹云朵家居拖鞋",
          price: "9.9"
        },
        {
          img:
            "https://kaola-haitao.oss-cn-zhangjiakou.aliyuncs.com/df62415d551f4692ad4953a380e8892e1592805683939CE938EE0735165B6152AE41A26E8BFEF.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【易烊千玺代言】BVLGARI 宝格丽 大吉岭茶原版男士淡香水 100毫升 冷冽禁欲",
          price: "529"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/2687668e80f84ebd9b2b0270d7d19e5f_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【国行高铁标准 中欧双有机】EARTH'S BEST爱思贝地球高铁米粉1段 有机婴幼辅食纯大米粉 175克 下单返券",
          price: "72"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/2eeb7f618ea74ddea6160539069bdb9d_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【美国原装进口】LAgirl/洛杉矶女孩4色眼影盘ins超火小盘便携平价学生哑光裸妆持久防水修容眼妆网红眼影",
          price: "37"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/30aa6667edff47bc8827a28791cc56bb1566554247147jznxy95j10246.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【3款可选】Dove 多芬 植萃精油沐浴露 500克/瓶 含葡萄籽油",
          price: "35"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/b10b3c5e57924dcca9ba0fd4ff7e0c07_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "2条装 雅特茂春夏提臀瘦腿裤外出百搭打底裤女修身收腹收臀燃脂美腿塑身型裤女运动裤瑜伽裤",
          price: "99"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/15e9169184b5446cb1fefaaf216a425a1573352495572k2sdgb7l12394.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【轻盈版】LΛNEIGE 兰芝 水衡保湿水乳精华三件套",
          price: "418"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/8ed81b60-237c-4f6b-b2b2-9773b74ae174.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "德国爱他美白金较大婴儿双重HMO配方奶粉2段 6-12个月 800g/罐",
          price: "240"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/05fe0a6a93d14fa2be9660fa580d29fb_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "ARMANI 乔治·阿玛尼 POWER 权利权力粉底液长效遮瑕 2# 3# 3.5# 4#",
          price: "296"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/a55ecae1acbc4148a612b18c910d9a941571968007527k25h5xee11154.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "SK-II 大红瓶面霜 R.N.A微肌因赋活修护精华霜 80克(轻盈版)",
          price: "1059"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/a68677ff36c744278a7d82041f037c9c_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【+9.9换购洁面】LΛNEIGE 兰芝正品 雪纱丝柔防晒新款隔离霜修饰肤色30毫升紫色/绿色修饰痘痘肌泛红肌",
          price: "95"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/8d6085e20a454f86a16e0f1467a2c83c1587001122458CF1C66D3DACE4E191A01293062D1BE9C.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Sulwhasoo 雪花秀 滋盈肌本润颜水乳套装",
          price: "679"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/291605b673a04916981f39abe2966cd21572573870670k2fhvoe413559.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "ÍpsΛ 茵芙莎 纯美无瑕三色遮瑕盘 4.5克 化妆师界人手一盒",
          price: "275"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/f6e250a219974fcb8843449f6abe0993_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "澳洲bio island儿童乳钙 婴幼儿童宝宝液体乳钙 补钙片促骨骼生长胶囊90粒",
          price: "99"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/dc320e966f134102b3862ca267e512d4_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "新款拖鞋夏外穿ins潮网红同款水钻平底一字拖女仙女风凉拖鞋",
          price: "49"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/c3577645f9d5497cb2198faebdf09da1_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【包邮】【毛孔吸尘器】韩国VT老虎小布丁清洁面膜 积雪草精华修复收缩毛孔泥膜去角质面膜7.5g*10/盒",
          price: "45"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/1f88aaa55a434cf9ba5ab0a4b931ded41552978635642jtffdsa010036.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【自营3盒装】JMsolution 水光蜂蜜面膜 10片",
          price: "119"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/a2825225-3940-49ec-a762-b06f63760d13.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Merries 花王妙而舒 M64+4片 纸尿裤/尿不湿",
          price: "186"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/b32f766f-f68b-4dbf-a1af-4805524175b8.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "BLACKMORES 澳佳宝 芹菜籽精华 3000mg 50片/瓶*2瓶【有助关节健康】",
          price: "145"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/0ae5a47d632d4e06b1ecf7e224c21e25_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "MAC/魅可 修饰轮廓 立体塑形 生姜高光粉饼 立体绒光修容饼 9g",
          price: "196"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/4eb3ad9572da4ca38e0851b1941deb061574647444259k3dsfk0j11117.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【滋润不脱色】SAINT LAURENT PARIS 圣罗兰 黑管唇釉 #416断货王 番茄红",
          price: "259"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/3d639e61-b235-4d0c-ba0e-a05583093df6.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【营养丰富】法国进口Roland罗朗德婴幼儿营养油初榨核桃油250ml",
          price: "128"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/23e4ba0a-0cda-4863-aa2f-c6ba6d976d7b?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【清仓特价】香奈儿 炫亮魅力丝绒唇膏口红 橘调水红色 明星同款色 丝绒#43珊瑚红 艳橘红#102 悸动#174",
          price: "125"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/ffd71431a0124c6080cc649b69601ab51559300248871jwbz3w9h10528.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "COSME DECORTE 黛珂 肌耀未来洁面乳 130克",
          price: "195"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/12a1faa3-037a-472e-92f2-80d89b76cc3f?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【限时秒杀】DAJIANG大江 bduck小黄鸭 短绒浴室防滑垫吸水地毯卧室门垫家用进门垫子门口脚垫地垫",
          price: "19.9"
        },
        {
          img:
            "https://kaola-haitao.oss-cn-zhangjiakou.aliyuncs.com/35f1be33fb804ba1a01d8d1e7821d9c51596083652144DAA9C83A4FCFE7CCCFC06FD6CBCC12D7.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【2件装 2种可选】SHISEIDO 资生堂 惠润 柔净洗发露套组/洗护组合 绿野芳香",
          price: "98"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/4210f2f8a89c464a8b1ee95ac853eb201554894026063jub3r8z610860.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Balea 芭乐雅 健康7天焕肤安瓶 7支装",
          price: "189"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/2dcfecac-ecfc-4486-af02-fe7bc4f3c436?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【小仙女护手必备】Herbacin贺本清 德国小甘菊纪念礼盒20ml*4 -小精灵款",
          price: "99"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/08468051-8665-4dd4-8fb2-e4bb32fc78a0.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "Doppelherz 双心 多维 叶黄素护眼胶囊 30粒/盒*3盒 润目护眼 舒缓干涩疲劳",
          price: "159"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/710a46c2989049cf8c4496fb3bd1c6fc_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "TINCOCO 900D轻压棉质加绒加厚保暖秋冬打底袜连裤袜踩脚袜显瘦修身金棉打底裤",
          price: "49"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/793b5bab1e824cbf98858b51d516a358_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "阿迪达斯AdidasNEO情侣板鞋休闲轻便运动男女鞋小白鞋 F99255 F99251 F99252 F99254 F99256 F99130 EE7901",
          price: "333"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/e9b447bc1d5c4dbbb2c2ecbc7a79b1161551773488810jsvhvb1212280.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "KOBAYASHI 小林制药 祛痘印粉刺暗疮膏痘痘膏 18克",
          price: "79"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/bdef41e636944825bab6d71f8a742d381553772561875jtsk2doh12180.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Balea 芭乐雅 健康7天焕肤安瓶 7支/件",
          price: "55"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/a298955a-e9b7-46b1-9bb9-9055e7f3194e.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Doppelherz 双心 多维 护眼叶黄素胶囊 30粒/盒 5件装",
          price: "205"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/071dbc6b-8688-4295-8ff9-1b96b5927400.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "Doppelherz 双心 多维 叶黄素护眼胶囊 30粒/盒*4盒 润目护眼 舒缓干涩疲劳",
          price: "169"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/0d078add971c47c087aaaa82846746b31553245321169jtju5s5010122.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Nuxe 欧树 神奇补水眼霜 15毫升 脂肪粒离开我",
          price: "105"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/irdfi69s95_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "德国ZWILLING 双立人 base系列 四件套锅具",
          price: "1299"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/c4019dd5-425f-4dc0-93c1-2e11ab303fe7?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【刘诗诗马思纯宋茜同款】Olay 玉兰油 水感透白精华露 30毫升 提亮肌肤 光感小白瓶",
          price: "228"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/5f88a683b6a94201b7a5806f1f201be01554888002383jub0653010727.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "HABA 角鲨烷精纯护肤油 15毫升 白油精油脸部保湿",
          price: "119"
        },

        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/98ed2e73-97cd-4aab-b9d3-4601b3f75bbd?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "UMBRO茵宝男冬季宽松版运动羽绒服长款鸭绒连帽羽绒保暖外套 UP174AP2001",
          price: "699"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/e1e6d6b9-e1b8-4a35-be32-f2ed00556f8f.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Swisse斯维诗 睡眠片 100片/瓶*2瓶",
          price: "238"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/1e793ff5e4304c52b39f490150d8be2a1541863232586joblk4do12822.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【休闲款·偏大2码】CANADA GOOSE 加拿大鹅 Expedition系列男士羽绒派克大衣",
          price: "8999"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/21f55e0c-06fa-40d9-ba05-b08c42631cc9.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "TwinLotus双莲 即食燕窝原味冰糖型 75ml*6瓶*6盒",
          price: "750"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/6c8507bd198a4b02bb73b49361471e141520228972360jedt2ud110289.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【清爽不油 孕妇可用】NARIS UP 娜丽丝 防晒乳 粉色 90克",
          price: "89"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/6e171004-251d-4fea-9c52-dcce5cd39e68?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "FILA斐乐男女同款中性时尚潮流破坏者老爹鞋",
          price: "719"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/27a2de5dbf114c0eaef1d04378ba26b31564553587317jyqut65e10566.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【高保湿型水乳】MUJI 无印良品 敏感肌水乳套装（200ml+200ml）",
          price: "129"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/1bhu80vb420_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【向往的生活同款】Grow Gorgeous 头发增厚精华液加强版 60毫升",
          price: "379"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/5813016d806b43d39b158143f0f3103f1552553002458jt8dyzlx10590.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【长效控油】LA ROCHE-POSAY 理肤泉 清痘净肤水油平衡乳 40毫升 mat乳",
          price: "109"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/27420dac-83a4-4ca1-9893-d864cf0417a7.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "TwinLotus双莲 即食燕窝原味冰糖型 75ml*6瓶装",
          price: "125"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/0b70596f-f294-41b8-8728-5e1e6985dd80.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "TwinLotus双莲 即食燕窝冰糖型 75ml*12瓶",
          price: "250"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/6e542511628b4557819b2dbc560266fa1572430671613k2d4mf9v13008.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title:
            "【哑光显白】KIKO MILANO 哑光小金管口红 3.5克 质感高级 开架之光",
          price: "105"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/db7309a1773e4f1cbe52cd6f57a064b71524713219400jgfyvtil11522.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "CLINIQUE 倩碧 卓越润肤啫喱 无油黄油 125毫升 2瓶装",
          price: "339"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/03a784f9844243d0ae70e5d321a754a11564571268503jyr5c51h10701.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "MUJI 无印良品 无漂白原色化妆棉 60*50mm180枚",
          price: "22"
        },
        {
          img:
            "https://kaola-pop.oss.kaolacdn.com/96e478d0d3584f7ba76c12c97749d23e_800_800.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "Nike耐克男鞋女鞋 低帮板鞋情侣小白鞋运动鞋休闲鞋",
          price: "339"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/1f83cf083faf4a9a8eeba7ac407b6a8a1555399000254jujgelk410102.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "LANCÔME 兰蔻 新水份缘保湿舒缓啫喱 50毫升/件 3件装",
          price: "159"
        },
        {
          img:
            "https://kaola-haitao.oss.kaolacdn.com/25cd6392-a328-4f0b-919f-6bbdeaaaa9c8.jpg?x-oss-process=image/resize,w_345,h_345/quality,q_95/format,webp",
          title: "【美肤滋养】TwinLotus双莲 即食燕窝原味冰糖型 75ml*24瓶装",
          price: "500"
        }
      ]
    };
  },

  components: {},

  methods: {
    // 轮播图
    onChange(index) {
      this.current = index;
    },
    // 回到顶部
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 400) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
      if (that.scrollTop > 200) {
        that.koala = true;
      } else {
        that.koala = false;
      }
    },
    // 头部搜索框
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 滚动条偏移量
      let offsetTop = document.querySelector("#boxFixed").offsetTop; // 要滚动到顶部吸附的元素的偏移量
      this.isFixed = scrollTop > offsetTop ? true : false;
    }
  },

  mounted() {
    // 考拉头像和回到顶部
    window.addEventListener("scroll", this.scrollToTop);
    // 头部搜索框
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style scoped>
@import "~@/assets/css/home.css";
</style>